<!-- 党建智搜 -->
<template>
  <div>
    <van-nav-bar
      title="党建智搜"
      left-arrow
      @click-left="$router.push('/')"
    />
    <!-- 搜索框 -->
    <div class="searchInput">
      <div>
        <input type="text" v-model="data.keyWord" id="inputId">
        <img @click="searchResult" src="../../assets/search.png" alt="">
      </div>
    </div>
    <!-- 人员 -->
    <div v-for="(item,i) in fourSearch" :key="i">
      <div v-if="item.array.length>0" class="border-bottom-one-rem">
        <titleOld :text="item.text"></titleOld>
        <div @click="resultTurn(i,ele)" class="personLi" v-for="(ele,index) in item.array" :key="index">
          <span v-if="i===0" v-html="brightenKeyword(ele.nickname, data.keyWord)"></span>
          <div v-if="i===1" class="ellipsis" v-html="brightenKeyword(ele[item.arrayFeild], data.keyWord)"></div>
          <div v-if="i===2||i===3" class="ellipsis" v-html="ele[item.arrayFeild]"></div>
        </div>
        
        <div class="moreSearch" @click="moreSearch(i)">
          <div class="leftMore">
            <img src="../../assets/blueSearch.png" alt="">
            {{`更多${item.text}搜索`}}
          </div>
          <img src="../../assets/grayLeftArrow.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleOld from '../components/titleOld'
import { turnHref } from '@/untils/untils.js'
import { getUserInfo } from '@/api/index.js'
export default {
  components: {titleOld},
  data() {
    return {
      fourSearch:[
        {
          text:'人员',
          arrayFeild:'nickname',
          array:[]
        },
        {
          text:'组织',
          arrayFeild:'organname',
          array:[]
        },
        {
          text:'制度',
          arrayFeild:'title',
          array:[]
        },
        {
          text:'知识',
          arrayFeild:'title',
          array:[]
        },
      ],
      data:{
        "methodName":"quertNickNameLike",
        "serviceName":"PersonalSearch",
        "pageindex":"1",                               
        "pagesize":"10",                           
        "usercode":"",                      
        "roleid":"" ,
        "keyWord":"",                                                 
      },
      lastTwoData:{
        "methodName":"queryEsDataH5",
        "serviceName":"SearchEngines",
        "currPage":"0",                               
        "pageSize":"10",                           
        "empCode":"",                      
        "roleId":"" ,  
        "businessId":"970ae0834612451fbc5855bc0d126121",
        "keyWord":"",                                                 
       }
    };
  },
  watch:{
    'data.keyWord':{
      handler(newVal){
        this.lastTwoData.keyWord = newVal
        this.searchResult()
      }
    }
  },
  mounted() {
    document.getElementById('inputId').focus()
  },
  created(){
    this.data.roleid = localStorage.getItem('roleId')
    this.data.usercode = localStorage.getItem('usercode')
    this.lastTwoData.roleId = localStorage.getItem('roleId')
    this.lastTwoData.empCode = localStorage.getItem('usercode')
  },
  methods: {
    searchResult(){
      // 人员搜索
      this.data.methodName = 'quertNickNameLike'
      this.data.pageindex = '1'
      getUserInfo(this.data).then(res => {
        if (res.data) {
          this.fourSearch[0].array = res.data
        }
      })
      // 组织搜索
      this.data.methodName = 'quertOrgNameLike'
      this.data.pageindex = '1'
      getUserInfo(this.data).then(res => {
        if (res.data) {
          this.fourSearch[1].array = res.data
        }
      })
      // 制度搜索
      this.lastTwoData.methodName = 'queryEsDataH5'
      getUserInfo(this.lastTwoData,'DispatchAction','2').then(res => {
        if (res) {
          this.fourSearch[2].array = res
        }
      })
      // 知识搜索
      this.lastTwoData.methodName = 'queryEsDataH5'
      getUserInfo(this.lastTwoData,'DispatchAction','2').then(res => {
        if (res) {
          this.fourSearch[3].array = res
        }
      })
    },
    brightenKeyword(val,keyword){ // 显示搜索关键字为红色
      const Reg = new RegExp(keyword, 'i');
       if (val) {
          const res = val.replace(Reg, `<span style="color: #BB383E;">${keyword}</span>`);
          return res;
       }
    },
    goTourl(item){
      const data = {
        methodName:'queryH5',
        serviceName:'Configure',
        roleId:this.data.roleid,
        empCode:this.data.usercode,
        url:item.url,
        uuid:item.uuid,
        businessId:item.businessId
      }
      getUserInfo(data,'DispatchAction','2').then(res => {
        if(res){
          res = res[0]
          if (res.terminal == 3) {
            turnHref(res.jumpaddress)
          } else if (res.terminal == 1) {
            const setjson={"parenttype":res.parenttype,"datauuid":res.datauuid};
            bmnative.fireEvent('AppJumpLink', JSON.stringify(setjson));
          }
        }
      })
    },
    resultTurn(i,item){
      switch (i) {
        case 0:
          const setjson={"empCode":item.username};
          bmnative.fireEvent('AppJumpDy', JSON.stringify(setjson))
          break;
        case 1:
          this.$router.push({path:`/basicOragan/${item.organcode}`});
          break;
        case 2: case 3:
          this.goTourl(item)
          break;
        default:
          break;
      }
    },
    moreSearch(i){ // 更多搜索,i为当前序列
      this.$router.push('/searchMore/'+i+'/'+this.data.keyWord)
    }
  }
}
</script>
<style scoped>
.leftMore{
  display: flex;
  align-items: center;
}
.moreSearch img{
  height: 17px;
  width: 17px;
  margin-right: 5px;
}
.moreSearch{
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left:16px;
  font-size: 12px;
  color: #3279B0;
  border-bottom: 1px solid #F4F4F4;
}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  width: 66rem;
}
.personLi{
  height: 44px;
  line-height: 44px;
  padding-left: 16px;
  font-size: 14px;
  border-bottom: 1px solid #F4F4F4;
  
}
.searchInput img{
  width: 17px;
  height: 17px;
}
.searchInput input{
  outline: none;
  border: none;
  width: 90%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.searchInput>div{
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 30px;
  width: 90%;
  background: #FFFFFF;
  border: 1px solid #BFBFBF;
  border-radius: 3px;
}
.searchInput{
  height: 50px;
  background: #F4F4F4;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>